<template>
  <div>
    <div class="row wrapper border-bottom white-bg page-heading">
      <div class="col-sm-4">
        <h2>文件新增</h2>
        <ol class="breadcrumb">
          <li>
            <router-link :to="{ name: 'home' }">
              主页
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'productList' }">
              项目列表
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'product' }">
              文件
            </router-link>
          </li>
          <li class="active">
            <strong>文件新增</strong>
          </li>
        </ol>
      </div>
    </div>

    <div class="wrapper wrapper-content  animated fadeInUp">
      <div class="ibox">
        <div class="ibox-title">
            <h5></h5>
            <div class="ibox-tools">
              <router-link :to="{ name: 'product' }" class="btn btn-primary btn-xs">
                返回
              </router-link>
            </div>
        </div>
        <div class="ibox-content">
          <div class="form-horizontal">
            <div class="form-group"">
              <label class="col-sm-3 control-label">文件</label>
              <div class="col-sm-4 ">
                  <input type="file" id="upload">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">文件描述</label>
              <div class="col-sm-4">
                  <textarea class="form-control" v-model='description'>
                  </textarea>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">权限</label>
              <div class="col-sm-4">
                <select class="form-control" v-model="permissions" >
                  <option v-for="(item, index) in config.filePermissionsSelect" :value="item.code">{{item.value}}</option>
                </select>
              </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
              <div class="col-sm-4 col-sm-offset-3">
                <a class="btn btn-primary" v-on:click="submit">
                  <i class="fa fa-save"></i> 保存
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import server from '@/server/server.js'
export default {
  name: 'fileNew',
  data () {
    return {
      file: '',
      description: '',
      permissions: 1
    }
  },
  components: {
  },
  created () {
  },
  mounted () {
  },
  methods: {
    submit: function() {
      const vue = this
      if (!$("#upload")[0].files[0] || !vue.description || (vue.permissions != 0 && vue.permissions != 1)) {
        vue.$toastr('warning', '参数异常', 'warning')
        return false;
      }

      var formData = new FormData();  
      formData.append("upload_file", $("#upload")[0].files[0]);
      formData.append("filedescription",vue.description);
      formData.append("filepermissions", vue.permissions);
      formData.append("productid", vue.$route.params.productId);
      $.ajax({  
        type: 'post',  
        url: server.postFileUploadUrl,  
        data: formData,  
        cache: false,  
        processData: false,
        // 告诉jQuery不要去设置Content-Type请求头
        contentType : false,
      }).success(function (data) {
        if (data.code == 0) {
            vue.$router.push({ name: 'product', params: { productId: vue.$route.params.productId } })
            vue.$toastr('success', "上传成功", 'success')
        } else {
            vue.$toastr('warning', data.msg, 'warning')
        }
      }).error(function () {
            vue.$toastr('error', "上传失败", 'error')
      });  
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
input[type='file'] {
  margin-top: 5px;
}
</style>
